export default {
  data() {
    return {
      moving: false,
      vLeft: 0,
      vTop: 0,
      vWidth: 0,
      vHeight: 0,
      vDiv: {},
      vCover: {},
      timer: null,
    }
  },
  mounted() {
    this.vDiv = document.querySelector('.file-item-wrap')
    this.vCover = document.querySelector('.cover')
  },
  methods: {
    init() {
      this.moving = false
      this.vLeft = 0
      this.vTop = 0
      this.vWidth = 0
      this.vHeight = 0
    },
    //鼠标按下
    handleMousedown(e) {
      if (this.rename) return
      //选择弹窗禁用拖选
      if (this.netFileSelectFlag) return
      this.init()
      this.moving = true
      this.vLeft = e.pageX
      this.vTop = e.pageY
      this.vCover.style.width = '0px'
      this.vCover.style.height = '0px'
      this.vCover.style['border-width'] = '0px'
      e.preventDefault() // 阻止默认行为
      e.stopPropagation() // 阻止事件冒泡
    },
    //鼠标松开
    handleMouseup(e) {
      //选择弹窗禁用拖选
      if (this.netFileSelectFlag) return
      if (e.pageX != this.vLeft || e.pageY != this.vTop) {
        this.checkList = []
      }
      this.vCover.style.width = '0px'
      this.vCover.style.height = '0px'
      this.vCover.style['border-width'] = '0px'
      this.moving = false
      this.findItem(e)
      e.preventDefault() // 阻止默认行为
      e.stopPropagation() // 阻止事件冒泡
    },
    //鼠标移动
    handleMouseMove(e) {
      if (!this.moving) return
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        //左右拖动
        if (e.pageX < this.vLeft) {
          this.vCover.style.left = e.pageX + 'px'
        } else {
          this.vCover.style.left = this.vLeft + 'px'
        }
        //上下拖动
        if (e.pageY < this.vTop) {
          this.vCover.style.top = e.pageY + 'px'
        } else {
          this.vCover.style.top = this.vTop + 'px'
        }
        this.vWidth = Math.abs(this.vLeft - e.pageX)
        this.vHeight = Math.abs(this.vTop - e.pageY)

        this.vCover.style.width = this.vWidth + 'px'
        this.vCover.style.height = this.vHeight + 'px'
        this.vCover.style['border-width'] = '1px'
        e.preventDefault() // 阻止默认行为
        e.stopPropagation() // 阻止事件冒泡
      }, 5)
    },
    handleMouseLeave(e) {
      if (!this.moving) return
      setTimeout(() => {
        this.handleMouseup(e)
      }, 300)
    },
    //选择元素
    findItem() {
      let blockList = document.querySelector('.select-wrap').children
      for (let i = 0; i < blockList.length; i++) {
        //计算每个checkbox的位置信息
        let left = blockList[i].getBoundingClientRect().left
        let right = blockList[i].offsetWidth + left
        let top = blockList[i].getBoundingClientRect().top
        let bottom = blockList[i].offsetHeight + top
        //遮罩层位置
        let cLeft = this.vCover.getBoundingClientRect().left
        let cTop = this.vCover.getBoundingClientRect().top
        //判断是否在选择区
        let leftCover = cLeft <= left && left <= cLeft + this.vWidth
        let rightCover = cLeft <= right && right <= cLeft + this.vWidth
        let topCover = cTop <= top && top <= cTop + this.vHeight
        let bottomCover = cTop <= bottom && bottom <= cTop + this.vHeight
        //大范围框选
        if ((leftCover || rightCover) && (topCover || bottomCover)) {
          let id = blockList[i].getAttribute('data-id')
          if (this.checkList.includes(id)) return
          this.checkList.push(id)
        }
        //小范围框选
        let middleWidth = left <= cLeft && right > cLeft + this.vWidth
        let middleHeight = top <= cTop && bottom > cTop + this.vHeight
        if (
          (middleWidth && topCover) ||
          (middleWidth && bottomCover) ||
          (middleHeight && leftCover) ||
          (middleHeight && rightCover)
        ) {
          let id = blockList[i].getAttribute('data-id')
          if (this.checkList.includes(id)) return
          this.checkList.push(id)
        }
      }
    },
  },
}
